<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN">
<html>
  <head>
    <link type="text/css" rel="stylesheet" href="/css/main.css" />
    
<script src = "../js/wz_jsgraphics.js">
</script>
<script src = "../js/jquery-1.3.2.min.js">
</script>
<script src = "../js/json2.js">
</script>
<script src="../js/util.js">
</script>
<script src="../js/chats.js">
</script>
<script src="../js/remoteUser.js">
</script>
<script>
var remoteUser = null;


function init() {
  setupChat('0');
  remoteUser = new RemoteUser(null, new UserHandler());  
  window.addEventListener("mousemove", mousemoveHandler, false);
}

function mousemoveHandler() {
  remoteUser.onActivityDetected(false);
}

function RoomListOfParticipants(elName) {
  this.elName = "#" + elName;
  this.participants = [];
}

RoomListOfParticipants.prototype.update = function(users, whitePlayer, blackPlayer) {
  html = "";
  for (var i = 0; i < users.length; i++) {
    html += '<tr><td class="viewerName">'+ users[i].email + " " + users[i].rating + "</td></tr>";
  }  
  $(this.elName).html(html);
}


function UserHandler() {
  
}

UserHandler.prototype.updateUsers = function(users) {
  $("#tables").html(this.getTables(users));
}

/*
// TODO: Use JST
UserHandler.prototype.getParticipants = function(users) {
  var html = "";
  for (var i = 0; i < users.length; i++) {
    
    html += '<tr><td class="viewerName">'+ users[i].email + " " + users[i].rating + 
             " games: " + users[i].number_of_games_played + " table: " + users[i].table + "</td></tr>";
  }  
  return html;
}
*/

// TODO: use JST
UserHandler.prototype.getTables = function(users) {
  tables = new Object();
  for (var i = 0; i < users.length; i++) {
    if (tables[users[i].table_number] == null) {
       tables[users[i].table_number] = new Array();
    }
    tables[users[i].table_number].push(users[i]);
  }
  var html = "";
  for (var t in tables) {
    var table_number = tables[t][0].table_number;
    if (table_number > 0) {
      html += '<tr><td class="tables"><div>'
              + '<a href="/room?table=' + t + '">' + table_number+ '</a>' 
              + '</div></td></tr>';
    }
    for (var u = 0; u < tables[t].length; u++) {
        html += '<tr><td class="viewerName">'+ this.getUserInfo(tables[t][u]) + "</td></tr>";
    }
  }  
  return html;
}

UserHandler.prototype.getUserInfo = function(user) {
  var html =  user.email + " " + user.rating + 
             " games: " + user.number_of_games_played + " Status: ";
  if (user.active == "false") {
    html += "Idle";
  } else {
    html += "Active";
  }
  return html;
}
</script>
  </head>
  <body onload="init()">
  	{% if user %}
    	<div align="right">Logged in as {{ user.nickname }} - 
          <a href="/edituser/{{ user.email }}">Edit My Profile</a> -
    	  <a href="{{log_in_out_url}}">Log out</a> </div>
   	{% else %}
    	<div align="right"><a href="{{log_in_out_url}}">Log in</a></div>
    {% endif %}
         <!--style="padding:10px;background-color:grey;width:100%;height:70%; overflow:auto;">-->
      <tr>
        <td>
        <!--
            <table>
            {% for table in room.sorted_tables %}
              <tr>
                <td><a href="/room?table={{ table.table_number_str }}">Table {{ table.table_number_str }}</a> 
                {% if table.participants %}
                   
                  {% for participant in table.participants %}
                    <div class = "participantInfo">
                      <div id = "nickname">
                          {{ participant.nickname }}
                      </div>
                      <div id = "rating">  
                          {{ participant.rating }}
                      </div>
                      <div id = "numberOfGames">
                          games played: {{ participant.number_of_games_played }}
                      </div>
                    </div>
                  {% endfor %} 
                {% endif %}
                {% if table.game %}
                  <div class="gameInfo">
                     Playing game
                  </div>
                {% endif %}
                </td>
                </tr>
          {% endfor %}
            </table>
        </td>
      </tr>
    </table>
    <table>
      <tr>
        <td>
               {% for participant in room.users %}
                    <div class = "participantInfo">
                      <div id = "nickname">
                          {{ participant.nickname }}
                      </div>
                      <div id = "rating">  
                          {{ participant.rating }}
                      </div>
                      <div id = "numberOfGames">
                          games played: {{ participant.number_of_games_played }}
                      </div>
                    </div>
                  {% endfor %} 

        </td>
      </tr>
    </table>
    -->
    <tr>
      <td>
        <div id = "newTable">
           <a href="{{new_table_url}}">Create new game</a>
        </div>
      </td>
      <td>
        <div id = "tables">
        </div>
      </td>
      <td>
	      <div id = "participants">        
        </div>
      </td>
    </tr>
  </body>
</html>